<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />
    <view class="div1">
      <Backbar title="考试" />
      <!-- 一级选择器 -->
      <wht-tabs
        v-model="pageData.tab1"
        :list="pageData.tabList1"
        @change="handleTab1"
        bgColor="#e5effd"
        color="#898889"
        active-color="#254872"
        line-color="#254872"
        :font-size="26"
        :isRound="true"
        :min-width="175"
        :padding="100"
      />
    </view>
    <scroll-view
      ref="scrollContainer"
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
    >
      <!-- 空显示 -->
      <view
        v-if="
          (pageData.tab1 === 0 && pageData.examList1.length === 0) ||
          (pageData.tab1 === 1 && pageData.examList2.length === 0)
        "
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <image src="/static/images/icons/imgNone.png" style="width: 309rpx; height: 259rpx" />
      </view>
      <!-- 未完成列表 -->
      <view v-if="pageData.tab1 === 0">
        <view v-for="(item, index) in pageData.examList1" :key="index" @click="openExam(item)">
          <ExamItem :exam="item" />
        </view>
      </view>
      <!-- 已完成列表 -->
      <view v-if="pageData.tab1 === 1">
        <view v-for="(item, index) in pageData.examList2" :key="index" @click="openExam(item)">
          <ExamItem :exam="item" />
        </view>
      </view>
      <!--加载中，到底啦横幅-->
      <view
        style="margin-top: 30rpx; padding-bottom: 50rpx"
        v-if="
          !(
            (pageData.tab1 === 0 && pageData.examList1.length === 0) ||
            (pageData.tab1 === 1 && pageData.examList2.length === 0)
          )
        "
      >
        <wd-divider color="black">{{ pageData.loading ? '加载中...' : '已经到底了' }}</wd-divider>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import ExamItem from '@/components/ExamItem/ExamItem.vue'
import { listBg } from '@/static/imgMap'
import { getExamListForThree } from '@/service/exam/exam' // 导入新的 API

const pageData = reactive({
  tab1: 0,
  tabList1: ['未完成', '已完成'],
  loading: false,
  div2Height: 0,
  examList1: [], // 未完成列表
  examList2: [], // 已完成列表
})

const openExam = async (item) => {
  // 如果考试已完成，则不执行任何操作
  if (item.isfinished) {
    return
  }

  uni.navigateTo({
    url: `/pages-sub/exam/examRoom/examRoomDoor?id=${item.senduserId}`,
  })
  // // 调用考试验证API
  // const res = await judgeCanExamTest(item.senduserId)
  //
  // // 如果验证通过，跳转到考试页面
  // if (res.code === 200) {
  //   uni.navigateTo({
  //     url: `/pages-sub/exam/examRoom/examRoomDoor?id=${item.senduserId}`,
  //   })
  // } else {
  //   // 验证失败，显示错误信息
  //   const errorMsg = res.message || '无法进入考试，请稍后再试'
  //   uni.showToast({
  //     title: errorMsg,
  //     icon: 'none',
  //   })
  // }
}

const handleTab1 = (index) => {
  // 切换 Tab 时不需要重新加载数据，因为数据已全部加载
  // handleSearch() // 可以移除，或者保留用于未来可能的刷新逻辑
}

// 重命名并简化数据加载函数
const loadExamData = async () => {
  if (pageData.loading) {
    return
  }
  pageData.loading = true
  pageData.examList1 = []
  pageData.examList2 = []

  const res = await getExamListForThree()
  if (res.code === 200 && res.data) {
    // 根据 isfinished 字段分类数据
    res.data.forEach((item) => {
      if (item.isfinished) {
        pageData.examList2.push(item) // 已完成
      } else {
        pageData.examList1.push(item) // 未完成
      }
    })
  } else {
    console.error('获取考试列表失败:', res.message)
    uni.showToast({ title: res.message || '加载失败', icon: 'none' })
  }

  pageData.loading = false
}

onMounted(() => {
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })

  // 调用新的数据加载函数
  loadExamData()
})
</script>

<style scoped lang="scss">
.entire {
  width: 100%;

  .div1 {
    background-color: rgb(37, 73, 115);

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
  }

  .div2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
  }
}
</style>
